<template>
	<div class="interactive">
		<div class="lemon-sidebar__scroll dynamic_content">
			<div class="title">{{ $t('cir.朋友圈') }}</div>
			<div class="list">
				<div class="item" v-for="(item, index) in list" :key="index" @click="router(item.moment_id)">
					<img :src="item.from_avatar" class="avatar" />
					<div class="info">
						<div class="name">{{ item.from_nickname }}</div>
						<div class="msg">{{ item.action_desc }}</div>
						<div class="time">{{ item.action_time }}</div>
					</div>
				</div>
			</div>
			<div class="page_view">
				<el-pagination background layout="prev, pager, next" hide-on-single-page :current-page="page"
					:total="total" @current-change="change" />
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			page: 1,
			list: [],
			total: 0
		}
	},
	mounted() {
		this.getList()
	},
	methods: {
		router(id) {
			this.$router.push({
				name: 'dynamicDeta',
				query: { id }
			})
		},
		async getList() {


			const { list, total, unread_count } = await this.$api.momentApi.otherLikeCommentList({
				page: this.page
			});
			this.list = list;
			this.total = total;
			this.$store.commit('changeUnreadCount', unread_count)
		},
		change(value) {
			this.page = value;
			this.getList();
		},
	}
}
</script>

<style scoped lang="scss">
.interactive {
	min-width: 100%;
	height: 100%;
	border-radius: 10px 10px 0 0;
	padding: 24px;
	box-sizing: border-box;
	background: #FCFCFE;
	position: relative;
	overflow: hidden;

	.dynamic_content {
		height: 100%;
		overflow-y: auto;

		.title {
			font-weight: bold;
			font-size: 20px;
			color: #333333;
			padding-bottom: 16px;
		}
	}

	.list {
		width: 544px;
		margin: 0 auto;
		padding: 0 15px 15px;
		box-sizing: border-box;
		background: #FFFFFF;
		box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
		border-radius: 4px 4px 4px 4px;

		.item {
			background: #FFFFFF;
			box-shadow: inset 0px -1px 0 0 rgba(0, 0, 0, 0.1);
			padding: 10px;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.avatar {
				width: 60px;
				height: 60px;
				border-radius: 5px;
			}

			.info {
				flex: 1;
				min-height: 60px;
				line-height: 1;
				padding: 0 8px;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.name {
					font-weight: 600;
					font-size: 16px;
					color: #4A5F7C;
				}

				.msg {
					font-weight: 500;
					font-size: 14px;
					color: #333333;
					padding: 6px 0;
				}

				.time {
					font-weight: 500;
					font-size: 14px;
					color: #666666;
				}
			}
		}
	}
}
</style>